<!--菜品管理员端菜品管理-->
<template>
  <el-breadcrumb separator-class="el-icon-arrow-right">
    <el-breadcrumb-item :to="{ path: '/index' }">菜品管理员端</el-breadcrumb-item>
    <el-breadcrumb-item>菜品管理</el-breadcrumb-item>
  </el-breadcrumb>
  <div class="card_search">
    <!--    <el-switch-->
    <!--        v-model="switchStatus"-->
    <!--        size="large"-->
    <!--        active-text="商品已上架"-->
    <!--        inactive-text="商品已下架"-->
    <!--        style="&#45;&#45;el-switch-on-color: rgb(0,152,131);margin-right: 15px"-->
    <!--        disabled-->
    <!--    />-->
	<div class="add-btn">
	  <el-select v-model="queryInfo.homePage" class="max" placeholder="请选择是否展示在首页" size="large" clearable
	             @change="selectHomePage(queryInfo.homePage)">
	    <el-option
	        v-for="item in optionsHomePage"
	        :key="item.value"
	        :label="item.label"
	        :value="item.value"
	    />
	  </el-select>
	</div>
    <div class="add-btn">
      <el-select v-model="queryInfo.type" class="max" placeholder="请选择菜品分类" size="large" clearable
                 @change="selectChange()">
        <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value"
        />
      </el-select>
    </div>
    <div class="add-btn">
      <!--      <el-button @click="changeGoodsStatus">开关单</el-button>-->
      <el-button @click="dialogVisible = true">添加菜品</el-button>
    </div>
    <el-input
        v-model="queryInfo.dishesName"
        class="search"
        size="large"
        placeholder="Search..."
        @blur="getGoodInfo"
		@keyup.enter='getGoodInfo'
    />
    <img src="@/assets/imgs/home/search.png" alt="" @click="getGoodInfo"
         style="width: 0.4rem; background-color: rgb(57,62,74); cursor: pointer;">
  </div>
  <div class="goods_list">
    <div class="good" v-for="(good, index) in goodList" :key="index">
      <div class="good_img" @click="changeGoodsImg(good.id)">
        <!--        <component :is="Authimg" :authSrc="good.imageUrl" class="g_img"></component>-->
        <img :src="good.imagesUrl" alt="good" class="g_img">
      </div>
      <div class="good_other">
        <div class="good_name">
          <p>{{ good.dishesName }}</p>
        </div>
        <div class="good_logistics">
          <p>库存：{{ good.commodityQuantity }}份</p>
        </div>
        <div class="good_logistics">
          <p>物流：{{ good.shippingMethods }}</p>
        </div>
        <div class="good_btn">
		  <el-button type="primary" title="添加到首页" v-if="good.homepage==0" :icon="Check" size='large' @click='changHome(good.id)'></el-button>
		   <el-button type="primary" title="从首页删除" v-if="good.homepage==1" :icon="Close" size='large' @click='changHome(good.id)'></el-button>
          <el-button type="primary" title="修改菜品信息" :icon="Edit" size='large' @click='dialogVisibleCg(good.id)'></el-button>
          <el-button type="danger" title="删除菜品" :icon="Delete" size='large' @click='removeGoods(good.id)'></el-button>
        </div>
      </div>
    </div>
  </div>
  <el-pagination
      @current-change="handleCurrentChange"
      background
      layout="prev, pager, next"
      :total="total"
      :current-page="queryInfo.currentPage"
      :page-size="queryInfo.pageSize"
      class="pagination-container"
  />
  <!--  添加菜品-->
  <el-dialog
      title="添加菜品"
      :model-value="dialogVisible"
      :close-on-click-modal="false"
      width="50%" @close='closeAdd'>
    <el-form label-width='70px' :model='addForm' ref='addRef'>
      <el-form-item prop='type' label='菜品分类'>
        <el-select v-model="addForm.type" class="m-2">
          <el-option
              v-for="item in goodCat"
              :key="item.value"
              :label="item.label"
              :value="item.value"
          />
        </el-select>
      </el-form-item>
      <el-form-item prop='shippingMethods' label='物流方式'>
        <el-select v-model="addForm.shippingMethods" class="m-2">
          <el-option
              v-for="item in logistics"
              :key="item.value"
              :label="item.label"
              :value="item.value"
          />
        </el-select>
      </el-form-item>
      <el-form-item label='菜品图片' prop="file">
        <el-input v-model='addForm.file' v-if="false"></el-input>
        <el-upload
            action=""
            :data='addForm'
            :http-request="uploadImg"
            :before-upload='onBeforeUploadImage'
            :on-change='handleChange'
            :show-file-list="false"
            :multiple="true"
            accept='image/jpeg,image/jpg,image/png'
            ref="addUpload"
            v-loading.fullscreen.lock="loading"
        >
          <img v-if="addForm.file" :src="addForm.file" class="avatar">
          <div class="el-upload__text" v-else>
            点击上传菜品图片
          </div>
        </el-upload>
      </el-form-item>
      <el-form-item prop='dishesName' label='菜品名称'>
        <el-input v-model='addForm.dishesName'></el-input>
      </el-form-item>
      <el-form-item prop='present' label='菜品描述'>
        <el-input v-model='addForm.present'></el-input>
      </el-form-item>
      <div class='item_button'>
        <span class="dialog-footer">
          <el-button @click="dialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="addGoods">确 定</el-button>
        </span>
      </div>
    </el-form>
  </el-dialog>
  <!--  修改菜品-->
  <el-dialog
      title="修改菜品"
      :model-value="dialogVisibleChange"
      :close-on-click-modal="false"
      width="50%" @close='closeChange'>
    <el-form label-width='70px' :model='changeForm' ref='changeRef'>
      <el-form-item prop='type' label='菜品分类'>
        <el-select v-model="changeForm.type" class="m-2">
          <el-option
              v-for="item in goodCat"
              :key="item.value"
              :label="item.label"
              :value="item.value"
          />
        </el-select>
      </el-form-item>
      <el-form-item prop='shippingMethods' label='物流方式'>
        <el-select v-model="changeForm.shippingMethods" class="m-2">
          <el-option
              v-for="item in logistics"
              :key="item.value"
              :label="item.label"
              :value="item.value"
          />
        </el-select>
      </el-form-item>
      <el-form-item label='菜品图片'>
        <el-input v-model='changeForm.file' v-if="false"></el-input>
        <el-upload
            action=""
            :data='changeForm'
            :http-request="uploadImgChange"
            :before-upload='onBeforeUploadImage'
            :on-change='handleChangeCg'
            accept='image/jpeg,image/jpg,image/png'
            :show-file-list="false"
            ref="changeUpload"
            v-loading.fullscreen.lock="loading"
        >
          <img v-if="1" :src="changeForm.file" class="avatar">
          <div class="el-upload__text" v-else>
            Drop file here or <em>click to upload</em>
          </div>
        </el-upload>
      </el-form-item>
      <el-form-item prop='dishesName' label='菜品名称'>
        <el-input v-model='changeForm.dishesName'></el-input>
      </el-form-item>
      <!--      <el-form-item prop='quantity' label='菜品数量'>-->
      <!--        <el-input v-model='changeForm.quantity'></el-input>-->
      <!--      </el-form-item>-->
      <el-form-item prop='present' label='菜品描述'>
        <el-input v-model='changeForm.present'></el-input>
      </el-form-item>
      <div class='item_button'>
        <span class="dialog-footer">
          <el-button @click="dialogVisibleChange = false">取 消</el-button>
          <el-button type="primary" @click="changeGoods">确 定</el-button>
        </span>
      </div>
    </el-form>
  </el-dialog>

  <!--  添加菜品描述图-->
  <el-dialog title="修改菜品描述图"
             :model-value="dialogVisibleImgChange"
             :close-on-click-modal="false"
             width="50%" @close='closeImgChange'>
    <el-upload
        v-model:file-list="fileList"
        action=""
        :http-request="uploadImgs"
        list-type="picture-card"
        :on-preview="handlePictureCardPreview"
        :on-remove="handleRemove"
        v-loading.fullscreen.lock="loading"
        accept='image/jpeg,image/jpg,image/png'
    >
      <el-icon>
        <Plus/>
      </el-icon>
    </el-upload>

    <el-dialog v-model="dialogVisibleImg">
      <img style="width: 60%" :src="dialogImageUrl" alt="Preview Image"/>
    </el-dialog>
    <div class='item_button' style="margin-top: 35px">
        <span class="dialog-footer">
          <el-button @click="dialogVisibleImgChange = false">取 消</el-button>
          <el-button type="primary" @click="tochangeGoodsImg">确 定</el-button>
        </span>
    </div>
  </el-dialog>
</template>

<script setup>
import {reactive, ref, getCurrentInstance, onMounted} from "vue";
import {
  Delete,
  Edit,
  Plus,
  Check,
  Close
} from '@element-plus/icons-vue'
import {enableBilling, getGoodDImg} from "@/service/MenuService";
const {proxy} = getCurrentInstance()

// 商品开放状态
const switchStatus = ref(false)
// 商品列表
let goodList = reactive([])
// 渲染
const total = ref(0)
const queryInfo = reactive({
  dishesName: '',
  type: '',
  currentPage: 1,
  pageSize: 16
})
const loading = ref(false)
// 添加商品
const addRef = ref('')
let dialogVisible = ref(false)
const addForm = reactive({
  file: '',
  dishesName: '',
  present: '',
  type: '',
  quantity: '',
  shippingMethods: '',
  files: [],
  copies: 1,
  capacity: 0,
  unitPrice: 0.00
})
const addUpload = ref('')
const addStatus = ref(false)
const optionsHomePage=reactive([
	{label: '首页', value: '1'},
	{label: '非首页', value: '0'},
])
const options = reactive([
  {label: '蔬菜', value: '蔬菜'},
  {label: '肉', value: '肉'},
  {label: '蛋', value: '蛋'},
  {label: '禽类', value: '禽类'},
  {label: '玉米', value: '玉米'},
  {label: '水果', value: '水果'},
  {label: '畜肉', value: '畜肉'},
  {label: '水产', value: '水产'},
  {label: '大米', value: '大米'},
  {label: '特产', value: '特产'},
  {label: '赠品', value: '赠品'}
])
const goodCat = reactive([
  {label: '蔬菜', value: '蔬菜'},
  {label: '肉', value: '肉'},
  {label: '蛋', value: '蛋'},
  {label: '禽类', value: '禽类'},
  {label: '玉米', value: '玉米'},
  {label: '水果', value: '水果'},
  {label: '畜肉', value: '畜肉'},
  {label: '水产', value: '水产'},
  {label: '大米', value: '大米'},
  {label: '特产', value: '特产'},
  {label: '赠品', value: '赠品'}
])
const logistics = reactive([
  {label: '普通物流', value: '普通物流'},
  {label: '冷链', value: '冷链'},
  {label: '基地自送', value: '基地自送'}
])
// 重置表单
const rstForm = () => {
  addRef.value.resetFields()
  addUpload.value.clearFiles()
}
// 修改商品
const changeRef = ref('')
let dialogVisibleChange = ref(false)
let changeForm = reactive({})
const cgId = ref('')
const changeUpload = ref('')
// 修改商品详细图
const dialogVisibleImgChange = ref(false)
const dialogVisibleImg = ref(false)
const dialogImageUrl = ref('')
const fileList = reactive([])
const fileListB = reactive([])
const GoodsImgId = ref(0)
// 渲染网页
onMounted(() => {
  getGoodInfo()
  // getGoodsStatus()
})

// 获取菜品数据
const getGoodInfo = async () => {
	queryInfo.pageSize=16
  const {data: res} = await proxy.$http.MenuService.getGoods(queryInfo)
  if (res.code !== 200) return proxy.$message.error('获取商品列表失败')
  // console.log(res.data);
  goodList.length = 0
  for (let i = 0; i < res.data.records.length; i++) {
    // res.data.records[i].imagesUrl =
    goodList.push(res.data.records[i])
  }
  total.value = res.data.total
}

// 根据分页器切换每页的菜品
const handleCurrentChange = val => {
  queryInfo.currentPage = val
  if( queryInfo.homePage){
	  selectHomePage(queryInfo.homePage)
  }else{
	  getGoodInfo()
  }
  
}

// 根据分类渲染
const selectChange = async () => {
  if( queryInfo.homePage){
  	  selectHomePage(queryInfo.homePage)
  }else{
  	   getGoodInfo()
  }
}
// 查询是否在首页
const selectHomePage = async (e) => {
	// console.log(e);
	if(e==1){
		queryInfo.pageSize=999
	}else{
		queryInfo.pageSize=16
	}
	
	
  const {data: res} = await proxy.$http.MenuService.getGoods(queryInfo)
  if (res.code !== 200) return proxy.$message.error('获取商品列表失败')
  // console.log(res.data);
  goodList.length = 0
  for (let i = 0; i < res.data.records.length; i++) {
    // res.data.records[i].imagesUrl =
	if(e==res.data.records[i].homepage||e==''){
		goodList.push(res.data.records[i])
	}
  }
  total.value = res.data.total
}
// 获取开关单状态
// const getGoodsStatus = async () => {
//   const {data: res} = await proxy.$http.MenuService.getBillingType()
//   if (res.code !== 200) return proxy.$message.error(`获取开单状态失败${res.msg}`)
//   // switchStatus.value  = !!res.data.split('"')[3]
//   if (res.data.whether === 'true') switchStatus.value = true
//   if (res.data.whether === 'false') switchStatus.value = false
// }

// 开关单操作
const changeGoodsStatus = () => {
  if (switchStatus.value) {
    proxy.$messageBox.confirm('此操作将所有商品下架, 是否继续?', '提示', {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning'
    }).then(async () => {
      const res = await proxy.$http.MenuService.enableBilling({whether: false})
      if (res.status === 200) {
        // await getGoodsStatus()
        return proxy.$message.success(`下架商品成功`)
      }
      return proxy.$message.error(`下架商品失败${res.msg}`)
    })
        .catch(() => {
          proxy.$message('cancel')
        })
  } else {
    proxy.$messageBox.confirm('此操作将所有商品上架, 是否继续?', '提示', {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning'
    }).then(async () => {
      const res = await proxy.$http.MenuService.enableBilling({whether: true})
      if (res.status === 200) {
        // await getGoodsStatus()
        return proxy.$message.success(`上架商品成功`)
      }
      return proxy.$message.error(`上架商品失败${res.msg}`)
    })
        .catch(() => {
          proxy.$message('cancel')
        })
  }

}

// 添加菜品
const closeAdd = () => {
  dialogVisible.value = false
}
const addGoods = async () => {
  const {data: res} = await proxy.$http.MenuService.addGoods({...addForm, imagesUrl: addForm.file})
  if (res.code !== 200) return proxy.$message.error(`添加菜品失败${res.msg}`)
  proxy.$message.success(`添加菜品成功`)
  rstForm()
  getGoodInfo()
  dialogVisible.value = false
}

// 修改菜品
const dialogVisibleCg = async id => {
  cgId.value = id
  const {data: res} = await proxy.$http.MenuService.getGoodDetail({'id': id})
  changeForm.file = res.data.imagesUrl
  changeForm.dishesName = res.data.dishesName
  changeForm.shippingMethods = res.data.shippingMethods
  changeForm.type = res.data.type
  changeForm.present = res.data.present
  dialogVisibleChange.value = true
}
const changeGoods = async () => {
  const {data: res} = await proxy.$http.MenuService.changeGoods({
    ...changeForm,
    imagesUrl: changeForm.file,
    id: cgId.value
  })
  console.log('imageUrl', changeForm.file)
  if (res.code !== 200) return proxy.$message.error(`修改商品失败${res.msg}`)
  getGoodInfo()
  proxy.$message.success(`修改商品成功${res.msg}`)
  dialogVisibleChange.value = false
}
const closeChange = () => {
  dialogVisibleChange.value = false
}

// 删除菜品
const removeGoods = id => {
  proxy.$messageBox.confirm('此操作将永久删除该菜品, 是否继续?', '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
  }).then(async () => {
    const {data: res} = await proxy.$http.MenuService.deleteGoods({id})
    if (res.code === 200) {
      await getGoodInfo()
      return proxy.$message.success('删除菜品成功')
    }
    return proxy.$message.error(res.msg)
  })
      .catch(() => {
        proxy.$message('cancel')
      })
}

// 修改菜品详细图
const closeImgChange = () => {
  dialogVisibleImgChange.value = false
}

const handleRemove = (uploadFile, uploadFiles) => {
  if (fileListB.length !== 0) {
    for (let i = 0; i < fileListB.length; i++) {
      if (fileListB[i].url === uploadFile.url) {
        fileListB.splice(i, 1)
      }
    }
  }
}

const handlePictureCardPreview = (uploadFile) => {
  dialogImageUrl.value = uploadFile.url
  dialogVisibleImg.value = true
}

const changeGoodsImg = async id => {
  dialogVisibleImgChange.value = true
  GoodsImgId.value = id
  const {data: res} = await proxy.$http.MenuService.getGoodDImg({id})
  console.log('img', res.data)
  if (res.code !== 200) return proxy.$message.error('获取详细图失败')
  fileListB.length = 0
  fileList.length = 0
  if (res.data) {
    if (res.data[0].url !== '') {
      for (let i = 0; i < res.data.length; i++) {
        fileList.push(res.data[i])
        fileListB.push(res.data[i])
      }
    }
  }
}

const tochangeGoodsImg = async () => {
  const list = []
  const id =  GoodsImgId.value
  for (let i = 0; i < fileListB.length; i++) {
    list.push(fileListB[i].url)
  }
  console.log('submit', list)
  const {data: res} = await proxy.$http.MenuService.changeGoodDImg({id, photoUrls: list})
  if (res.code !== 200) return proxy.$message.error('修改详细图失败')
  proxy.$message.success('修改详细图成功')
  dialogVisibleImgChange.value = false
}

// 上传图片
const onBeforeUploadImage = file => {
  // const isLt1M = file.size / 1024 / 1024 < 1
  const isLt1M = file.size / 1024 / 1024
  console.log(isLt1M)
  // if (!isLt1M) {
  //   proxy.$message.error('上传文件大小不能超过 1MB!')
  // }
  return isLt1M
}

const uploadImg = param => {
  loading.value = true
  const formData = new FormData()
  formData.append('file', param.file)
  proxy.$http.MenuService.upLoadImg(formData, param).then(response => {
    loading.value = false
    console.log(response)
    addForm.file = response.data.data
    proxy.$message.success('上传图片成功')
  }).catch(response => {
    loading.value = false
    proxy.$message.error('上传图片失败')
  })
  return false
}

const uploadImgChange = param => {
  loading.value = true
  const formData = new FormData()
  formData.append('file', param.file)
  proxy.$http.MenuService.upLoadImg(formData, param).then(response => {
    loading.value = false
    console.log(response)
    changeForm.file = response.data.data
    proxy.$message.success('上传图片成功')
  }).catch(response => {
    loading.value = false
    proxy.$message.error('上传图片失败')
  })
  return false
}

const uploadImgs = param => {
  loading.value = true
  const formData = new FormData()
  formData.append('file', param.file)
  proxy.$http.MenuService.upLoadImg(formData, param).then(response => {
    loading.value = false
    fileListB.push({url: response.data.data})
    proxy.$message.success('上传图片成功')
  }).catch(response => {
    loading.value = false
    proxy.$message.error('上传图片失败')
  })
  return false
}

// 修改商品
const handleChange = (file, fileList) => {
  if (fileList.length > 1) {
    fileList.splice(0, 1);
  }
  addForm.file = URL.createObjectURL(file.raw)
}
const handleChangeCg = (file, fileList) => {
  if (fileList.length > 1) {
    fileList.splice(0, 1);
  }
  changeForm.file = URL.createObjectURL(file.raw)
}
// 改变首页布局
const changHome= async (id)=>{
	const {data: res} = await proxy.$http.MenuService.changeHomePage({dishesId:id})
	// console.log(res);
	if (res.code !== 200) return proxy.$message.error('修改首页失败')
	getGoodInfo()
}
</script>

<style scoped lang="scss">
.search {
  width: 25%;
}

.card_search {
  display: flex;
  justify-content: right;
}

.add-btn {
  height: 40px;
  display: flex;
  margin-right: 50px;

  .el-button {
    font-size: 0.15rem;
    font-weight: bolder;
    background-color: rgb(0, 152, 131);
    height: 100%;
    color: white;
  }

  .el-button:hover {
    background-color: white;
    color: rgb(0, 152, 131);
  }

  .el-input-bg-color {
    background-color: #409EFF;
  }

  :deep(.el-input__inner) {
    // background-color: rgb(0, 152, 131);

    &::placeholder {
      color: white;
      font-weight: bolder;
      font-size: 16px
    }
  }

  :deep(.el-select .el-input .el-select__caret) {
    color: white;
  }
}

:deep(.add-btn .el-input__wrapper) {
  background-color: rgb(0, 152, 131)
}

:deep(.search .el-input__wrapper) {
  background-color: rgb(0, 152, 131)
}

:deep(.search .el-input__inner) {
  color: white
}

:deep(.el-input__inner) {
  &::placeholder {
    color: white;
    font-size: 16px
  }
}

.max :deep(.el-input__inner) {
  color: white;

  &::placeholder {
    color: white;
    font-size: 16px
  }
}

:deep(.search .el-icon) {
  color: white;
}

.goods_list {
  margin-top: 50px;
  display: flex;
  flex-wrap: wrap;

  .good {
    width: 260px;
    height: 130px;
    margin-top: 20px;
    margin-left: 24px;
    display: flex;
    justify-content: space-between;
  }

  .good_img {
    width: 130px;
    height: 100%;

    .g_img {
      width: 100%;
      height: 100%;
    }
  }

  .good_other {
    width: 110px;
    height: 100%;

    .good_logistics {
      height: 10%;
      width: 100%;
      margin-bottom: 10px;

      p {
        height: 20px;
        line-height: 20px;
        font-size: 10px;
        color: gray;
        text-align: left;
        padding-left: 5px;
        box-sizing: border-box;
      }
    }

    .good_name {
      height: 40%;
      width: 100%;
      padding: 0 5px;
      margin-top: -10px;
      box-sizing: border-box;
      font-size: 0.2rem;
      text-align: left;
	  overflow: hidden;
	  cursor: pointer;
      p {
        height: 60px;
		width: 100%;
        line-height: 60px;
		overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
      }
    }
.good_name:hover {
	 p {
		 overflow: unset;
		text-overflow: unset;
	     /* animation: marquee-right 20s linear infinite; */
	    /* @keyframes 动画指定名称。 */
	    animation-name:marquee-left;
	    /* 定义动画完成一个周期需要多少秒或毫秒 */
	    animation-duration: 5s;
	    /* 速度曲线 */
	    animation-timing-function:linear;
	    /* 定义动画应该播放多少次 */
	    animation-iteration-count: infinite;
		}
	}
	/* // 从右向左 */
	@keyframes marquee-left {
	    0% {
	        transform: translateX(100%);
	    }
	    100% {
	        transform: translateX(-100%);
	    }
	}
	/* // 从左向右 */
	@keyframes marquee-right {
	    0% {
	        transform: translateX(-100%);
	    }
	    100% {
	        transform: translateX(100%);
	    }
	}
	/* // 从上到下 */
	@keyframes marquee-top {
	    0% {
	        transform: translateY(-100%);
	    }
	    100% {
	        transform: translateY(100%);
	    }
	}
	/* // 从下到上 */
	@keyframes marquee-bottom {
	    0% {
	        transform: translateY(-100%);
	    }
	    100% {
	        transform: translateY(100%);
	    }
	}
    .good_btn {
      height: 50%;
      width: 100%;
      display: flex;
	  justify-content: space-around;
      .el-button {
        background-color: white;
        color: rgb(0, 152, 131);
        border: none;
        font-size: 0.3rem;
        width: 15px;
      }

      .el-button:hover {
        color: white;
        background-color: rgb(0, 152, 131);
      }

      :deep(el-button--large) {
        padding: 0 !important;
      }
    }
  }
}

.el-pagination {
  position: absolute;
  right: 8%;
  bottom: 2%
}

input[type="file"] {
  display: none;
}

.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}

.avatar-uploader .el-upload:hover {
  border-color: #409EFF;
}

.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}

.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
</style>
